<template>
  <div class="homepage">
    <div class="top">
      <el-form class="search">
        <el-form-item>
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in option_ks"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in option_ys"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="value3" placeholder="请选择">
            <el-option
              v-for="item in option_lx"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="住院号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="床号"></el-input>
        </el-form-item>
        <el-form-item style="margin-right: 0">
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="top_2f">
        <el-radio-group v-model="radio" class="top_2f_left">
          <el-radio-button
            class="left_item"
            v-for="item of queryType"
            :key="item.label"
            :label="item.label"
          >
            <span>{{ item.val }}</span>
            <span>{{ item.label }}</span>
          </el-radio-button>
        </el-radio-group>
        <div>
          <el-switch
            v-model="switchVal"
            active-color="#13ce66"
            inactive-color="#999999"
            class="top_2f_right"
            @change="switchTab"
          >
          </el-switch>
          <span v-show="switchVal">卡片</span>
          <span v-show="!switchVal">列表</span>
        </div>
      </div>
    </div>
    <div class="mian">
      <ul class="card_list">
        <li class="card_item">
          <ul class="card_item_main">
            <li class="item_main item_main_top">
              <img src="../../assets/img/tested.png" alt="" class="tested" />
              <span class="bedNumber">01床</span>
              <br />
              <span class="userInformation">晓红</span>
              <span class="userInformation">女</span>
              <span class="userInformation">47岁</span>
            </li>
            <li class="item_main item_main_bottom">
              <span class="days_zy">11</span>
              <br />
              <span class="number_zy">123456789</span>
              <div class="container_btn">
                <span class="btn_text">科室</span>
                <span class="btn_text">杨医生</span>
                <span class="btn_text">2型</span>
              </div>
              <span class="time_zy">时间:11-20 14:05</span>
              <br />
              <span class="time_cl">早餐后</span>
              <br />
              <span class="measured">16.9mmol/L</span>
              <span class="icon_Collection">
                <i class="iconfont icon-shoucang1"></i>
              </span>
            </li>
          </ul>
        </li>
        <li class="empty_card_item">
          <span class="bedNumber">12床</span>
          <img class="emptyBed" src="./image/emptyBed.png" />
          <el-button class="addbtn" type="text">添加</el-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import "@/assets/fontIcon/collection/font_1858713_phswlcejg1/iconfont.css";

export default {
  data() {
    return {
      option_ks: [
        {
          label: "骨科",
          value: "1",
        },
        {
          label: "妇产科",
          value: "2",
        },
      ],
      option_ys: [
        {
          label: "李医生",
          value: "1",
        },
        {
          label: "王医生",
          value: "2",
        },
      ],
      option_lx: [
        {
          label: "1型",
          value: "1",
        },
        {
          label: "2型",
          value: "2",
        },
      ],
      value1: "", //科室val
      value2: "", //医生val
      value3: "", //类型val
      // 选择查看类型
      queryType: [
        {
          label: "全部人数",
          val: "222",
        },
        {
          label: "异常数据",
          val: "222",
        },
        {
          label: "待测人数",
          val: "222",
        },
        {
          label: "关注患者",
          val: "222",
        },
      ],
      radio: "全部人数",
      radio2: "",
      value4: "",
      switchVal: true, //卡片列表切换按钮绑定数值
    };
  },
  methods: {
    switchTab() {
      console.log(this.switchVal);
    },
  },
};
</script>

<style lang="scss" scoped>
.homepage {
  padding: 10px;
  .top {
    padding: 25px 31px;
    background-color: #fff;
    .search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-form-item {
        margin-right: 0.3rem;
      }
    }
    .top_2f {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top_2f_left {
        .left_item {
          width: 107px;
          height: 55px;
          border-radius: 7px;
          margin: 0;
          margin-right: 33px;
          & >>> .el-radio-button__inner {
            padding: 0;
            width: 107px;
            height: 55px;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: space-around;
            border: 1px solid rgb(64, 158, 255);
            border-radius: 7px;
          }
        }
      }
      .top_2f_right {
        // height: 100px;
      }
    }
  }
  .mian {
    padding: 13px 16px;
    .card_list {
      padding: 0;
      display: flex;
      .card_item {
        width: 275px;
        height: 322px;
        background-color: #fff;
        list-style-type: none;
        margin-right: 16px;
        border-radius: 7px;
        .card_item_main {
          padding: 0;
          .item_main {
            list-style-type: none;
            padding: 17px;
          }
          .item_main_top {
            height: 89px;
            position: relative;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #333333;
            .tested {
              width: 60px;
              position: absolute;
              right: 0;
              top: 0;
            }
            .bedNumber {
              font-size: 22px;
              margin-right: 20px;
            }
            .userInformation {
              font-size: 15px;
              margin-right: 20px;
            }
            &:after {
              content: "";
              display: block;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: 0;
              width: 234px;
              border-bottom: 1px solid #eeeeee;
            }
          }
          .item_main_bottom {
            // background: red;
            .days_zy {
              &::before {
                content: "住院天数:";
                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
              }
            }
            .number_zy {
              &::before {
                content: "住院号码:";
                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
              }
            }
            .time_zy {
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
            .measured {
              font-size: 22px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #ff0101;
            }
            .container_btn {
              margin-bottom: 18px;
              .btn_text {
                height: 24px;
                background: #01a7f0;
                border-radius: 10px;
                color: #fff;
                padding: 2px 10px;
                font-size: 14px;
              }
            }
            .time_cl {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
            }
            .icon_Collection {
              // display: block;
              margin-left: 0.2rem;
              &::after {
                content: "关注";
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ff0101;
                margin-left: 6px;
              }
              .icon-shoucang1 {
                // background-color: #ff0101;
                // color: #ff0101;
                color: #999999;
              }
            }
          }
        }
      }
      .empty_card_item {
        width: 275px;
        height: 322px;
        padding: 17px;
        background-color: #fff;
        list-style-type: none;
        margin-right: 16px;
        border-radius: 7px;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: space-between;
        .bedNumber {
          align-self: flex-start;
        }
        .emptyBed {
          width: 161px;
        }
        .addbtn {
          font-size: 18px;
          font-weight: 400;
          &::after {
            content: "病床";
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
          }
          &::before {
            content: "点击";
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }
}
</style>